<template>
	<view class="container">
		<view class="head">
			<u-icon @click="returnButton()" name="arrow-left" color="#fff" size="30"></u-icon>
			<u-text text="洗车" color="#fff" size="22" align="center" margin="4vh 0px 0px 0px"></u-text>
		</view>
		<view class="head-2">
		</view>
		<view class="content">
			<image src="@/static/images/ls/洗车.jpg" style="width: 100%; height: 30vh;"></image>
			<u-text text="大美汽车保养厂(解放路店)" size="18" bold line-height="40"></u-text>
			<view style="display: flex; align-items: center;">
				<view>
					<u-rate count="5" :readonly='true' value='4' activeColor='#FFC100' gutter=1></u-rate>
				</view>
				<text style="margin-left: 10rpx; font-size: 26rpx;">4分 销量：556</text>
			</view>
			<u-text text="营业时间:周一至周五 早上8:00-晚上22:00" size="10" line-height="22px"></u-text>
			<u-text text="位置:山阳区人民路与解放路交叉口" size="10" line-height="22px" suffixIcon="map-fill"
				iconStyle="font-size: 18px;color:#3183FB;margin-left:10rpx" @click="navigation_btn"></u-text>
		</view>
		<view class="content">
			<u-text text="服务项目" size="18" bold line-height="40"></u-text>
			<u-radio-group placement="column">
				<view style="position: relative;">
					<u-radio :customStyle="{marginBottom: '8px'}" label="小保养套餐(合成机油+机滤)" name="item.name">
					</u-radio>
					<view style="position:absolute;color: red;font-weight: 600;font-size: 36rpx; right:10rpx;top:-1px;">
						￥36.9
						<text
							style="color: #989898;font-weight: 500;font-size: 32rpx;text-decoration: line-through">￥60</text>
					</view>
				</view>
				<u-text text="这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍" wordWrap="anywhere" size="13" line-height="25"
					margin="0 0 12px 0"></u-text>
				<view style="border-bottom: 1px solid #dcdcdc; margin-bottom: 26rpx;"></view>

				<view style="position: relative;">
					<u-radio :customStyle="{marginBottom: '8px'}" label="小保养套餐(合成机油+机滤)" name="item.name">
					</u-radio>
					<view style="position:absolute;color: red;font-weight: 600;font-size: 36rpx; right:10rpx;top:-1px;">
						￥36.9
						<text
							style="color: #989898;font-weight: 500;font-size: 32rpx;text-decoration: line-through">￥60</text>
					</view>
				</view>
				<u-text text="这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍" wordWrap="anywhere" size="13" line-height="25"
					margin="0 0 12px 0"></u-text>
				<view style="border-bottom: 1px solid #dcdcdc; margin-bottom: 26rpx;"></view>

				<view style="position: relative;">
					<u-radio :customStyle="{marginBottom: '8px'}" label="小保养套餐(合成机油+机滤)" name="item.name">
					</u-radio>
					<view style="position:absolute;color: red;font-weight: 600;font-size: 36rpx; right:10rpx;top:-1px;">
						￥36.9
						<text
							style="color: #989898;font-weight: 500;font-size: 32rpx;text-decoration: line-through">￥60</text>
					</view>
				</view>
				<u-text text="这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍" wordWrap="anywhere" size="13" line-height="25"
					margin="0 0 12px 0"></u-text>
			</u-radio-group>
		</view>
		<view class="content">
			<u-text text="服务评价" size="18" bold line-height="40"></u-text>
			<view style="display: flex;margin-top: 10rpx;">
				<image src="@/static/images/ls/头像.jpg"
					style="width: 20vw;height: 20vw;border-radius: 10vw;margin-right: 30rpx;"></image>
				<view>
					<view style="display: flex;justify-content: space-between;width: 60vw;margin-bottom: 10rpx;">
						<text style="font-size: 32rpx;">黄**</text>
						<text style="color: #989898;">2022-12-31</text>
					</view>
					<u-rate count="5" :readonly='true' value='4' activeColor='#FFC100' gutter=1></u-rate>
					<view style="width: 60vw;margin-top: 20rpx;">
						<u-text text="洗的非常干净,几个小伙子很用心,态度也很号,强烈推荐来这家店洗车!!!" size="13"></u-text>
					</view>
				</view>
			</view>
			<view style="border-bottom: 1px solid #dcdcdc; margin-bottom: 26rpx;margin-top: 15rpx;"></view>

			<view style="display: flex;margin-top: 10rpx;">
				<image src="@/static/images/ls/头像.jpg"
					style="width: 20vw;height: 20vw;border-radius: 10vw;margin-right: 30rpx;"></image>
				<view>
					<view style="display: flex;justify-content: space-between;width: 60vw;margin-bottom: 10rpx;">
						<text style="font-size: 32rpx;">黄**</text>
						<text style="color: #989898;">2022-12-31</text>
					</view>
					<u-rate count="5" :readonly='true' value='4' activeColor='#FFC100' gutter=1></u-rate>
					<view style="width: 60vw;margin-top: 20rpx;">
						<u-text text="洗的非常干净,几个小伙子很用心,态度也很号,强烈推荐来这家店洗车!!!" size="13"></u-text>
					</view>
				</view>
			</view>
			<view style="border-bottom: 1px solid #dcdcdc; margin-bottom: 26rpx;margin-top: 15rpx;"></view>

			<view style="display: flex;margin-top: 10rpx;">
				<image src="@/static/images/ls/头像.jpg"
					style="width: 20vw;height: 20vw;border-radius: 10vw;margin-right: 30rpx;"></image>
				<view>
					<view style="display: flex;justify-content: space-between;width: 60vw;margin-bottom: 10rpx;">
						<text style="font-size: 32rpx;">黄**</text>
						<text style="color: #989898;">2022-12-31</text>
					</view>
					<u-rate count="5" :readonly='true' value='4' activeColor='#FFC100' gutter=1></u-rate>
					<view style="width: 60vw;margin-top: 20rpx;">
						<u-text text="洗的非常干净,几个小伙子很用心,态度也很号,强烈推荐来这家店洗车!!!" size="13"></u-text>
					</view>
				</view>
			</view>
			<view style="border-bottom: 1px solid #dcdcdc; margin-bottom: 26rpx;margin-top: 15rpx;"></view>
		</view>
		<view class="bottom">
			<view class="left-btn" @click="show = true">
				<u-icon label="购物车" size="25" color="#fff" name="shopping-cart-fill" label-size="16" label-color="#fff"
					top="1px"></u-icon>
			</view>
			<view class="right-btn">
				<u-icon @click="confirm" label="确认已选服务" size="25" color="#fff" name="checkmark-circle" label-size="16"
					label-color="#fff" top="1px"></u-icon>
			</view>
		</view>
		<view style="height: 22vh;"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			returnButton() {
				uni.$u.route('/pages/ls/nearbyStores/nearbyStores');
			},
			navigation_btn() {
				uni.$u.route('/pages/ls/navigation/navigation');
			},
			confirm() {
				uni.$u.route('/pages/ls/confirmOrder/confirmOrder');
			}
		}
	}
</script>

<style lang="scss">
	.bottom {
		background-color: white;
		width: 100%;
		height: 10vh;
		position: fixed;
		bottom: 0vh;
		padding: 0 5vw;
		box-sizing: border-box;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 3vh;


		.left-btn {
			width: 40vw;
			height: 6vh;
			background-image: url('@/static/images/ls/矩形 10 拷贝@3x.png');
			background-size: 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			padding: 4px 0px 0 9vw;
		}

		.right-btn {
			width: 40vw;
			height: 6vh;
			background-image: url('@/static/images/ls/矩形 10 拷贝 2@3x.png');
			background-size: 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			padding: 4px 0px 0 3vw;
		}
	}

	.content {
		// height: 85vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: white;
		width: 90vw;
		margin: 0 auto;
		margin-bottom: 2vh;
		transform: translateY(12vh);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;

	}

	.head-2 {
		position: absolute;
		background-color: #3183FB;
		width: 100%;
		height: 250px;
		overflow: auto;
		z-index: 0;
	}

	.head {
		position: fixed;
		background-color: #3183FB;
		width: 100%;
		height: 80px;
		overflow: auto;
		z-index: 3;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}
</style>